<template>
  <div class="test pad">
    <div class="head">
      <span>学校测试管理</span>
    </div>
    <el-tabs type="border-card" class="m-t-b">
      <el-tab-pane label="学校管理">
        <el-button type="primary" @click="openAddSchool">添加学校</el-button>
        <el-table :data="schoolList" class="m-t-b">
          <el-table-column label="学校名称" prop="schoolTitle"></el-table-column>
          <el-table-column label="学校编号" prop="schoolCode"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button circle type="default" icon="el-icon-edit" @click="openUpdateSchool(scope.row)"></el-button>
              <el-button circle type="danger" icon="el-icon-delete" @click="deleteSchool(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleSchoolPagi"
          :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="学校区域管理">
        <el-button type="primary" @click="openAreaDialog">添加学校区域</el-button>
        <el-table :data="schoolAreaList">
          <el-table-column label="学校" prop="schoolTitle"></el-table-column>
          <el-table-column label="学校标识" prop="schoolAreaIdentification"></el-table-column>
          <el-table-column label="学校名称" prop="schoolAreaTitle"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button circle icon="el-icon-edit" @click="openAreaUpdate(scope.row)"></el-button>
              <el-button circle type="danger" icon="el-icon-delete" @click="deleteArea(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleAreaPagi"
          :total="areaTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="用户管理">
        <el-button type="primary" @click="openAddUser">添加用户</el-button>
        <el-table :data="userList">
          <el-table-column label="用户姓名" prop="userName"></el-table-column>
          <el-table-column label="用户电话" prop="userPhone"></el-table-column>
          <el-table-column label="用户身份证" prop="userId"></el-table-column>
          <el-table-column label="用户照片" prop="userPic">
            <template slot-scope="scope">
              <img :src="scope.row.userPic" style="width: 100px;" />
            </template>
          </el-table-column>
          <el-table-column label="用户学校信息" prop="school"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button circle icon="el-icon-edit" @click="openUpdateUser(scope.row)"></el-button>
              <el-button circle icon="el-icon-delete" type="danger" @click="deleteUser(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handleUserPagi"
          :total="userTotal">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="schoolDialogTitle" :visible.sync="showSchoolDialog">
      <el-form ref="school" :model="school" :rules="rules">
        <el-form-item label="学校名称" prop="schoolTitle">
          <el-input v-model="school.schoolTitle" />
        </el-form-item>
        <el-form-item label="学校编号" prop="schoolCode">
          <el-input v-model="school.schoolCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideSchoolDialog">取 消</el-button>
        <el-button type="primary" @click="submitSchool('school')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="areaDialogTitle" :visible.sync="showAreaDialog">
      <el-form :model="schoolArea" ref="schoolArea" :rules="rules" label-position="top">
        <el-form-item label="请选择学校" prop="schoolId">
          <el-select v-model="schoolArea.schoolId">
            <el-option v-for="(item, i) in allSchoolList" :key="i" :value="item.schoolId" :label="item.schoolTitle"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校区域标识" prop="schoolAreaIdentification">
          <el-input v-model="schoolArea.schoolAreaIdentification" />
        </el-form-item>
        <el-form-item label="学校区域名称" prop="schoolAreaTitle">
          <el-input v-model="schoolArea.schoolAreaTitle" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideAreaDialog">取 消</el-button>
        <el-button type="primary" @click="submitSchoolArea('schoolArea')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="userDialogTitle" :visible.sync="showUserDialog">
      <el-form :model="user" label-position="top" ref="user" :rules="rules">
        <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="user.userName" />
        </el-form-item>
        <el-form-item label="用户电话" prop="userPhone">
          <el-input v-model="user.userPhone" />
        </el-form-item>
        <el-form-item label="用户身份证号" prop="userId">
          <el-input v-model="user.userId" />
        </el-form-item>
        <el-form-item label="用户照片" prop="userPic">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="handleUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <img v-if="user.userPic" :src="user.userPic" style="width: 100px;" />
        </el-form-item>
        <el-form-item label="学校信息" prop="school">
          <el-input v-model="user.school" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideUserDialog">取 消</el-button>
        <el-button type="primary" @click="submitUser('user')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSchoolListByPage,
  addSchool,
  updateSchool,
  deleteSchool,
  getAllSchoolList,
  addSchoolArea,
  updateSchoolArea,
  deleteSchoolArea,
  getSchoolArea,
  addUser,
  updateUser,
  deleteUser,
  getUserListByPage
} from '../api/testAPI';
import { uploadImage } from '../api';
import { fileToBase64 } from '../util/index';

export default {
  name: 'Test',
  data () {
    return {
      errorMsg: '服务异常, 请刷新重试!',
      school: {
        schoolTitle: '',
        schoolCode: ''
      },
      schoolList: [],
      pageSize: 10,
      total: 0,
      areaTotal: 0,
      userTotal: 0,
      userDialogTitle:'添加用户',
      showUserDialog: false,
      schoolDialogTitle: '添加学校',
      showSchoolDialog: false,
      areaDialogTitle: '添加学校区域',
      showAreaDialog: false,
      schoolId: '',
      schoolArea: { // 学校区域
        schoolId: '',
        schoolAreaIdentification: '',
        schoolAreaTitle: ''
      },
      schoolAreaId: '',
      userRegistrationId: '',
      schoolAreaList: [],
      allSchoolList: [],
      user: { // 注册用户
        userName: '',
        userPhone: '',
        userId: '',
        userPic: '',
        school: ''
      },
      userList: [],


      rules: {
        schoolTitle: [
          { required: true, message: '学校名称不能为空', trigger: 'blur' }
        ],
        schoolCode: [
          { required: true, message: '学校编号不能为空', trigger: 'blur' }
        ],
        schoolId: [
          { required: true, message: '请选择学校', trigger: 'blur' }
        ],
        schoolAreaIdentification: [
          { required: true, message: '区域标识不能为空', trigger: 'blur' }
        ],
        schoolAreaTitle: [
          { required: true, message: '区域名称不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        userPhone: [
          { required: true, message: '用户电话不能为空', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '用户身份证不能为空', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '学校信息不能为空', trigger: 'blur' }
        ],
        userPic: [
          { required: true, message: '照片不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    test () {
      console.log(this.$refs.test)
    },
    fetchSchoolList (page) { // 分页查询学校
      getSchoolListByPage({
        count: this.pageSize,
        index: page
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord;
          this.schoolList = res.data.data.list || []
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    fetchAllSchool () { // 不分页查询学校
      getAllSchoolList()
      .then(res => {
        if (res.data.code === 1) {
          this.allSchoolList = res.data.data || []
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    openAddSchool () { // 打开添加学校弹出框
      this.school.schoolTitle = '';
      this.school.schoolCode = '';
      this.schoolDialogTitle = '添加学校';
      this.showSchoolDialog = true
    },
    hideSchoolDialog () {
      this.showSchoolDialog = false
    },
    submitSchool (name) { // 提交学校信息
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.schoolDialogTitle === '添加学校') {
            addSchool(this.school)
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                });
                this.showSchoolDialog = false;
                this.fetchSchoolList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          } else {
            updateSchool({
              ...this.school,
              schoolId: this.schoolId
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                });
                this.showSchoolDialog = false;
                this.fetchSchoolList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          }
        } else {
          return false
        }
      })
    },
    openUpdateSchool (data) { // 打开修改学校弹出框
      this.schoolId = data.schoolId;
      this.school.schoolTitle = data.schoolTitle;
      this.school.schoolCode = data.schoolCode;
      this.schoolDialogTitle = '修改学校';
      this.showSchoolDialog = true
    },
    deleteSchool (data) { // 删除学校
      deleteSchool(data.schoolId)
      .then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.fetchSchoolList(1)
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    handleSchoolPagi (page) { // 学校分页
      this.fetchSchoolList(page)
    },
    openAreaDialog () { // 打开添加区域弹出框
      this.schoolArea.schoolId = '';
      this.schoolArea.schoolAreaIdentification = '';
      this.schoolArea.schoolAreaTitle = '';
      this.areaDialogTitle = '添加学校区域';
      this.showAreaDialog = true
    },
    hideAreaDialog () { // 隐藏区域弹出框
      this.showAreaDialog = false
    },
    submitSchoolArea (name) { // 提交学校区域信息
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.areaDialogTitle === '添加学校区域') {
            addSchoolArea(this.schoolArea)
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                });
                this.showAreaDialog = false;
                this.fetchAreaList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          } else {
            updateSchoolArea({
              ...this.schoolArea,
              schoolAreaId: this.schoolAreaId
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                });
                this.showAreaDialog = false;
                this.fetchAreaList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          }
        } else {
          return false
        }
      })
    },
    fetchAreaList (index) { // 分页查询区域
      getSchoolArea({
        count: this.pageSize,
        index
      })
      .then(res => {
        if (res.data.code === 1) {
          this.schoolAreaList = res.data.data.list || [];
          this.areaTotal = res.data.data.totalRecord
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    handleAreaPagi (page) { // 区域分页
      this.fetchAreaList(page)
    },
    openAreaUpdate (area) { // 打开区域修改弹出框
      this.schoolAreaId = area.schoolAreaId;
      this.schoolArea.schoolId = area.schoolId;
      this.schoolArea.schoolAreaIdentification = area.schoolAreaIdentification;
      this.schoolArea.schoolAreaTitle = area.schoolAreaTitle;
      this.areaDialogTitle = '修改学校区域';
      this.showAreaDialog = true
    },
    deleteArea (area) { // 删除区域
      deleteSchoolArea(area.schoolAreaId)
      .then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.fetchAreaList(1)
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    hideUserDialog () { // 隐藏用户弹出框
      this.showUserDialog = false
    },
    submitUser (name) { // 提交用户信息
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.userDialogTitle === '添加用户') {
            addUser(this.user)
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                });
                this.showUserDialog = false;
                // this.fetchUserList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          } else {
            updateUser({
              userRegistrationId: this.userRegistrationId,
              ...this.user
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                });
                this.showUserDialog = false;
                // this.fetchUserList(1)
              } else {
                this.$message.error(res.data.msg || this.errorMsg)
              }
            })
            .catch(e => {
              this.$message.error(this.errorMsg)
            })
          }
        } else {
          return false
        }
      })
    },
    fetchUserList (index) { // 分页查询用户
      getUserListByPage({
        count: this.pageSize,
        index
      })
      .then(res => {
        if (res.data.code === 1) {
          this.userList = res.data.data.list || [];
          this.userTotal = res.data.data.totalRecord
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    },
    handleUpload ({ file }) { // 上传图片
      fileToBase64(file, (base64) => {
        uploadImage(base64)
        .then(res => {
          if (res.data.code === 1) {
            this.user.userPic = res.data.data.path
          } else {
            this.$message.error(res.data.msg || this.errorMsg)
          }
        })
        .catch(e => {
          this.$message.error(this.errorMsg)
        })
      })
    },
    openAddUser () { // 打开添加用户弹出框
      this.user.userName = '';
      this.user.userPhone = '';
      this.user.userId = '';
      this.user.userPic = '';
      this.user.school = '';
      this.userDialogTitle = '添加用户';
      this.showUserDialog = true
    },
    handleUserPagi (page) { // 用户分页
      // this.fetchUserList(page)
    },
    openUpdateUser (user) { // 打开更新用户弹出框
      this.userRegistrationId = user.userRegistrationId;
      this.user.userName = user.userName;
      this.user.userPhone = user.userPhone;
      this.user.userId = user.userId;
      this.user.userPic = user.userPic;
      this.user.school = user.school;
      this.userDialogTitle = '修改用户';
      this.showUserDialog = true
    },
    deleteUser (user) {
      deleteUser(user.userRegistrationId)
      .then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          // this.fetchUserList(1)
        } else {
          this.$message.error(res.data.msg || this.errorMsg)
        }
      })
      .catch(e => {
        this.$message.error(this.errorMsg)
      })
    }
  },
  created () {
    this.fetchSchoolList(1);
    this.fetchAllSchool();
    this.fetchAreaList(1);
    // this.fetchUserList(1);
    // this.$emit('receiveData', [1,2,3])
  }
}
</script>
<style lang="scss">

</style>
